/*************文章列表组件*****************/

/*预览区*/
.page-diy-mobile-section .preview-target,.page-list-mobile-section .preview-target {
	.articles-list {
	
		.articles-list-preview {

			.title {
				padding:5px 10px;
				h3 {
					float:left;
					margin:10px auto;
				}
				.more{
					float:right;
					line-height: 32px;
					color:#999;
				}
			}

			/*竖排样式*/
			.list {
				padding: 0 10px;
				border: 0;

                .item.small {
                    min-height: 90px;
                    padding: 10px 0;
                    position: relative;
                    border-bottom: 1px solid #f2f2f2;
              
                    .image {
                      position: relative;
                      float:right;
                      width: 120px;
                      height:90px;
                      overflow:hidden;
                      background-color: #2D323D;
                      background-size: cover;
                      background-position: center;
                      background-repeat: no-repeat;
                      border-radius:5px;
                    }
              
                    .content {
                      position: relative;
                      margin-right:120px;
                      padding:0;
                      padding-right:10px;
                      height: 90px;
              
                      .title {
                        color:#303030;
                        font-weight: 600;
                        font-size:16px;
                        padding:0;
                        overflow: hidden;
                      }
                      .description {
                        margin-top: 3px;
                        color:#999;
                      }
                      .info {
                        position: absolute;
                        left: 0;
                        right: 10px;
                        bottom: 0;
                        display:flex;
              
                        .pop-info {
                          flex:1;
                          text-align: right;
                          color:#999;
                          font-size: 12px;
              
                          div {
                            display: inline-block;
                            margin-right:5px;
                          }
                        }
              
                        .category {
                          flex:1;
                          color: #999;
                          
                        }
                      }
                    }
                }
                .item.small:first-child {
                    padding-top: 0;
				}
				.item.small:last-child {
					border-bottom: 0;
				}
				.item.big {
					position: relative;
					min-height: 90px;
					margin-bottom:15px;
					box-shadow: 0 0 10px rgba(0,0,0,0.12);
					border-radius:5px;
					overflow: hidden;

					.image {
						position: relative;
						width:100%;
						height:auto;
						overflow:hidden;

						img {
							width: 100%;
							height: auto;
							display: block;
							border-radius:5px;
						}

						.type-container {
				          	position:absolute;
				          	top:5px;
				          	right:5px;
				          	background-color:rgba(0,0,0,.5);
				          	color:#fff;
				          	padding:2px 5px;
				          	border-radius:5px;
				        }
					}
					.content {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						padding:10px;
						min-height: 60px!important;
						background: rgba(255,255,255,0.95);
						border-radius:0 0 5px 5px;

						.title {
							font-weight: 600;
							font-size:16px;
							padding:0;
							color: #000;
						}
						.description {
							margin-top:5px;
							color:rgb(77, 69, 69);
						}
						.info {
							margin-top:5px;
							display:flex;

							.type {
					            flex:2;
					            text-align: left;
					            color:#999;

					            div {
					              display: inline-block;
					              margin-right:5px;
					            }
					        }

							.price {
								flex:1;
								text-align: right;
							}
						}
					}
				}
			}
		}
	}
}

/*控制区*/
.diy-preview-controller.articles-list {
	
    
}
